<!-- 组件名称: 转发数排行榜  -->
<!--
用法:
  参数说明:

  使用示例:

-->
<template>
  <div class="component">
    <div
      ref="forwardScrollBox"
      class="list_dv"
      @mouseenter="mouseenter"
      @mouseleave="mouseleave"
    >
      <div ref="forwardContent" class="scroll_dv">
        <div v-for="(item, index) in list" :key="index" class="list_item dfac">
          <div style="color:#000;height:48px;line-height: 48px;border:1px  solid red">{{item.itemName}}---{{item.itemNumber}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script type='text/ecmascript-6'>
export default {
  components: {},
  props: {},
  data() {
    return {
      totalCount: 10, // 总数
      scrollContentHeight: 0, // 滚动内容的高度
      scrollBoxHeight: 0, // 滚动父级盒子的高度
      scrollableHeight: 0, // 可以滚动的高度
      scrollTop: 0, // 元素已经滚动的高度
      num: 0,
      timer2: null, // 定时器
      list: [],
      baseList: [
        {
          itemName: '呼和浩特分支',
          itemNumber: 8700
        },
        {
          itemName: '呼和浩特分支',
          itemNumber: 6700
        },
        {
          itemName: '呼和浩特分支',
          itemNumber: 5700
        },
        {
          itemName: '呼和浩特分支',
          itemNumber: 4700
        },
        {
          itemName: '呼和浩特分支',
          itemNumber: 3700
        },
        // {
        //   itemName: '呼和浩特分支',
        //   itemNumber: 2700
        // },
        // {
        //   itemName: '呼和浩特分支',
        //   itemNumber: 1700
        // },
        // {
        //   itemName: '呼和浩特分支',
        //   itemNumber: 700
        // },
        // {
        //   itemName: '呼和浩特分支',
        //   itemNumber: 70
        // },
        // {
        //   itemName: '呼和浩特分支',
        //   itemNumber: 1
        // }
      ],
      isAdd: false,
      columnHeight: 50
    }
  },
  computed: {},
  watch: {},
  created() { },
  mounted() {
    this.list = [...this.baseList]
    this.$nextTick(() => {
      
      // 窗口大小变化时，重新获取滚动相关元素的高度
      window.onresize = this.regainHeight()
      // 监听元素滚动事件
      this.$refs.forwardScrollBox.addEventListener('scroll', this.handleScroll, true)
    })
  },
  destroyed() {
    // 离开时销毁定时器
    clearInterval(this.timer2)
  },
  methods: {
    // 页面第一次进入或者窗口大小变化时，获取滚动相关元素的高度
    regainHeight() {
      // 获取需要滚动元素的真实高度
      this.scrollContentHeight = this.$refs.forwardContent.getBoundingClientRect().height
      // 获取限制高度滚动容器的真实高度
      this.scrollBoxHeight = this.$refs.forwardScrollBox.getBoundingClientRect().height
      // 可以滚动的高度
      this.scrollableHeight = this.scrollContentHeight - this.scrollBoxHeight
      console.log('内容高度', this.scrollContentHeight, '盒子高度', this.scrollBoxHeight, '可以滚动的高度', this.scrollableHeight)
      if(this.scrollableHeight <=0) return
      this.autoScroll()
    },
    // 自动滚动
    autoScroll() {
      
      this.timer2 = setInterval(() => {
        console.log('scrollableHeight:',this.scrollableHeight,'scrollTop:',this.scrollTop);
        // debugger
        if (this.scrollableHeight >0) {
          if(Math.abs(this.scrollableHeight - this.scrollTop) == 50) {
            //还有一行要滚动到底了
            if(this.list.length===this.baseList.length) {
              // 没有加过数据
              this.list = [...this.list,...this.baseList]
              this.scrollableHeight += this.scrollContentHeight
              // 当为滚动到结尾时滚动
              this.scrollTop = this.$refs.forwardScrollBox.scrollTop += 50
            }else {
              // 已经加过数据
              this.list = [...this.baseList,...this.baseList]
              // 当为滚动到结尾时滚动
              this.$refs.forwardScrollBox.scrollTop = 50*(this.baseList.length-4)
              this.scrollTop = this.$refs.forwardScrollBox.scrollTop += 50
            }
          }else this.scrollTop = this.$refs.forwardScrollBox.scrollTop += 50
          
        } 
        else {
          //滚动结束，清除当前定时器，scrollTop重置为0，继续滚动
          this.scrollTop = this.$refs.forwardScrollBox.scrollTop = 0
          clearInterval(this.timer2)
          this.autoScroll()
        }
        console.log('转发数定时器')
      }, 1000)
    },
    // 鼠标移入时停止滚动
    mouseenter() {
      clearInterval(this.timer2)
    },
    // 鼠标移开继续滚动
    mouseleave() {
      this.autoScroll()
    },
    // 滚动元素滚动时的方法
    handleScroll(e) {
      console.log(e.target.scrollTop)
    }
  }
}
</script>
<style lang='less' scoped>
.component {
  width: 489px;
  height: 200px;
  padding: 10px;
  border: 1px solid palevioletred;
  font-family: Source Han Sans CN, Source Han Sans CN-Regular;
  letter-spacing: 1px;
  .list_dv::-webkit-scrollbar {
    display: none;
  }
  .list_dv {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    font-size: 14px;
    color: #d4eaf6;
    .list_item {
      width: 100%;
      // height:50;
      // margin-bottom: 25px;
      .ico_dv {
        width: 26px;
        height: 26px;
        margin-right: 16px;
        position: relative;
        .num_ico {
          width: 100%;
          height: 100%;
          position: absolute;
          left: 0;
          top: 0;
          border-radius: 50%;
        }
        span {
          width: 26px;
          height: 26px;
          position: relative;
          line-height: 26px;
          text-align: center;
        }
      }
      h6 {
        width: 110px;
        height: 26px;
        margin-right: 10px;
        line-height: 26px;
      }
      .statistic_dv {
        width: 196px;
        height: 18px;
        margin-right: 21px;
        .forward_base_ico {
          width: 6px;
          height: 18px;
          margin-right: 4px;
        }
        .forward_bg_ico {
          width: 6px;
          height: 18px;
          margin-right: 4px;
          opacity: 0.5;
          background: #164482;
          border-radius: 2px;
        }
      }
      .current_num {
        width: 48px;
        height: 26px;
        font-size: 16px;
        line-height: 26px;
      }
    }
  }
}
</style>

